<template>
  <!-- 判断是数据是否显示 -->
  <view class="user-list" v-if="users.length != 0">
    <!-- 渲染传递来的数组 -->
    <view v-for="(user, index) in users" :key="index" class="user-item">
      <image :src="user.avatar" class="avatar" />
      <view class="user-info">
        <view class="user-name">
          <image :src="user.icon" class="icon" />
          <text>{{ user.name }}</text>
        </view>
        <view class="user-details">
          <text>{{ user.age }}岁</text>
          <text>{{ user.height }}cm</text>
          <text>{{ user.location }}</text>
        </view>
      </view>
      <view class="user-time">
        <text>{{ user.time }}</text>
      </view>
    </view>
  </view>
  <!-- 当没有数据时，显示提示 -->
  <view v-else>
    <NoData />
  </view>
</template>

<script setup lang="ts">
import NoData from '@/components/NoData/NoData.vue'
import { defineProps } from 'vue'
import type { User } from '@/types/Initiate'
// 接受传递来的数据
const props = defineProps<{
  users: User[]
}>()
</script>

<style lang="scss" scoped>
.user-list {
  padding: 20rpx;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.user-info {
  flex: 1;
}
.user-name {
  display: flex;
  align-items: center;
}
.icon {
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
}
.user-details {
  display: flex;
  align-items: center;
  margin-top: 5rpx;
  font-size: 24rpx;
  color: #999;
}
.user-details text {
  margin-right: 20rpx;
}
.user-time {
  font-size: 24rpx;
  color: #999;
}
</style>
